<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Detail Page</title>
    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <div class="container">

        <h1>秒杀客户端DEMO</h1>
        <p></p>
        <form class="form-inline">
            <select id="item" class="form-control" style="width: 120px;">
                <option value="1">Iphone</option>
                <option value="2">充电宝</option>
            </select>
            <button id="go-miaosha" class="btn btn-default">秒杀</button>
        </form>
        <p></p>
        <h3>Process logs</h3>
        <ol id="process-logs-box">
        </ol>
    </div>

</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript">

    var running = false;
    var miaoSha = function(){
        if(running){
            return false;
        }
        running = true;
        var itemId = $("#item").val();
        log("itemId ["+itemId+"] 开始秒杀...")
        getQueueNumber(itemId,function (queueNumber){
            getToken(itemId,queueNumber,function (token){
                createOrder(itemId,queueNumber,token);
            })
        })
        $("#go-miaosha").text("秒杀中 ...");
        $("#go-miaosha").attr("disabled",true);
        return false;
    }

    function getQueueNumber(itemId , succCallBack){
        var url = "/miaosha-service/miaosha/"+itemId+"/enqueue";
        $.ajax({
            type: "POST",
            dataType:"text",
            url: url,
            success: function (queueNumber){
                log("获取排队号 : POST "+url+" -> "+queueNumber);
                succCallBack(queueNumber);
            },
            error: function (){
                alert("error")
                finished(itemId);
            }
        })
    }

    function getToken(itemId , queueNumber, succCallBack){
        var url = "/miaosha-service/miaosha/"+itemId+"/token/"+queueNumber;
        $.ajax({
            type: "GET",
            dataType:"text",
            url: url,
            success: function (token){
                log("通过排队号获取token :GET "+url+" -> "+token);
                //没有找到token,轮询
                if(token == "none"){
                    setTimeout(function (){
                        getToken(itemId , queueNumber, succCallBack);
                    },1000)
                }else{
                    succCallBack(token);
                }
            },
            error:function (){
                alert("getToken error");
                finished(itemId);
            }
        })
    }

    function createOrder(itemId,queueNumber,token){
        var url = "/miaosha-service/miaosha/"+itemId+"/order";
        var data = {"queueNumber":queueNumber,"token":token};
        console.log(data);
        $.ajax({
            type: "POST",
            dataType:"text",
            contentType:"application/json;charset=utf-8",
            data:JSON.stringify(data),
            url: url,
            success: function (bool){
                log("创建订单 : POST "+url+" -> "+bool);
                finished(itemId);
            },
            error: function (){
                alert("createOrder error")
                finished(itemId);
            }
        })
    }

    function finished(itemId){
        $("#go-miaosha").text("秒杀");
        $("#go-miaosha").attr("disabled",false);
        running = false;
        log("itemId ["+itemId+"] 秒杀结束！")
    }
    function log(message){
        console.log(message)
        $("#process-logs-box").append("<li>"+message+"</li>");
    }
    $("#go-miaosha").click(miaoSha);
</script>
</html>